<template>
	<div class="login">
		<el-form class="form" :rules="rules" :model="form" ref="form">
			<h3>注册界面</h3>
			<el-form-item label="用户名" label-width="80px" prop="username"><el-input class="item" v-model="form.username"></el-input></el-form-item>
			<el-form-item label="密码" label-width="80px" prop="pwd"><el-input class="item" type="password" v-model="form.pwd"></el-input></el-form-item>
			<el-form-item label="手机号" label-width="80px" prop="tele"><el-input class="item" v-model="form.tele"></el-input></el-form-item>
			<el-form-item label="性别" label-width="80px">
				<el-radio v-model="form.gender" :label="1">男</el-radio>
				<el-radio v-model="form.gender" :label="0">女</el-radio>
			</el-form-item>
			<el-form-item><el-button type="primary" @click="onSubmit">注册</el-button></el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			form: {
				gender: 1
			},
			rules: {
				username: [{ required: true, message: '请输入用户名', trigger: 'blur' }, { min: 3, max: 12, message: '长度在 3 到 12 个字符', trigger: 'blur' }],
				pwd: [
					{ required: true, message: '请输入密码', trigger: 'blur' },
					{
						min: 3,
						max: 12,
						message: '长度在 3 到 12 个字符',
						trigger: 'blur'
					}
				],
				tele: [
					{ required: true, message: '请输入手机号', trigger: 'blur' },
					{
						min: 11,
						max: 11,
						message: '请输入合法的手机号码',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		onSubmit() {
			this.$refs['form'].validate(valid => {
				if (valid) {
					this.$api.register(this.form).then(res => {
						console.log(res);
						if (res.message == 'SUCCESS') {
							this.$message({
								type: 'success',
								message: '注册成功'
							});
							this.$router.replace({
								path: `/login`,
								query: {
									parm: this.form
								}
							});
						} else {
							this.$message.error('该账号已经注册过');
						}
					});
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.login {
	display: flex;
	align-items: center;
	justify-content: center;
	background: url(../assets/background.jpg) no-repeat;
	height: 100vh;
	.form {
		width: 40%;
		background-color: white;
		border-radius: 2px;
		padding: 2% 3%;
		border-radius: 25px;
		opacity: 0.9;
	}
}

.item {
	width: 75%;
}
</style>
